<template>
  <cube-scroll class="seller" :options="sellerScrollOptions">
    <div class="seller-content">
      <div class="overview">
        <h1 class="title">
          {{ seller.name }}
        </h1>
        <div class="star-wrapper border-1px">
          <star :size="36" :score="seller.score"></star>
          <span class="count">({{ seller.ratingCount }})</span>
          <span class="count">月售{{ seller.sellCount }}单</span>
        </div>
        <div class="favorite" @click="toggleFavorite">
          <span class="icon-favorite" :class="favoriteClass"></span>
          <span class="text">{{ favoriteText }}</span>
        </div>
        <ul class="overview-content">
          <li class="block">
            <p class="title">起送价</p>
            <div class="text">
              <span class="bigFont">{{ seller.minPrice }}</span>
              <span class="smallFont">元</span>
            </div>
          </li>
          <li class="block">
            <p class="title">商家配送</p>
            <div class="text">
              <span class="bigFont">{{ seller.deliveryPrice }}</span>
              <span class="smallFont">元</span>
            </div>
          </li>
          <li class="block">
            <p class="title">平均配送时间</p>
            <div class="text">
              <span class="bigFont">{{ seller.deliveryTime }}</span>
              <span class="smallFont">分钟</span>
            </div>
          </li>
        </ul>
      </div>
      <split></split>
      <div class="bulletin">
        <h1 class="title">公告与活动</h1>
        <div class="content-wrapper border-1px">
          <p class="content">{{ seller.bulletin }}</p>
        </div>
        <ul class="support-list">
          <li
            class="support border-1px"
            v-for="(support, index) of seller.supports"
            :key="index"
          >
            <support-ico :size="2" :type="support.type"></support-ico>
            <span class="desc">{{ support.description }}</span>
          </li>
        </ul>
      </div>
      <split></split>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <cube-scroll class="pic-wrapper" :options="picScrollOptions">
          <ul class="pic-list">
            <li class="pic" v-for="(pic, index) of seller.pics">
              <img :src="pic" width="100%" height="100%" />
            </li>
          </ul>
        </cube-scroll>
      </div>
      <split></split>
      <div class="infos">
        <h1 class="title border-1px">商家信息</h1>
        <ul class="info-list">
          <li
            class="info border-1px"
            v-for="(info, index) of seller.infos"
            :key="index"
          >
            {{ info }}
          </li>
        </ul>
      </div>
    </div>
  </cube-scroll>
</template>

<script>
import supportIco from 'common/icon/supportIco'
import split from 'common/split/split'
import star from 'common/star/star'
import { saveToLocal, loadFromLocal } from 'assets/js/store.js'

export default {
  name: 'seller',
  props: {
    data: Object,
  },
  data() {
    return {
      sellerScrollOptions: {
        directionLockThreshold: 0,
        click: false,
      },
      picScrollOptions: {
        scrollX: true,
        stopPropagation: true,
        directionLockThreshold: 0,
      },
      favorite: false,
    }
  },
  computed: {
    seller() {
      return this.data.seller || {}
    },
    favoriteClass() {
      return this.favorite ? 'highlight' : ''
    },
    favoriteText() {
      return this.favorite ? '已收藏' : '收藏'
    },
  },
  methods: {
    toggleFavorite() {
      this.favorite = !this.favorite
 
      saveToLocal(this.seller.id, 'favorite', this.favorite)
    },
  },
  components: {
    supportIco,
    split,
    star,
  },
  created() {
    const unwatch = this.$watch('seller', () => {
      this.favorite = loadFromLocal(this.seller.id, 'favorite', false)
      unwatch() //卸载监听
    })
  },
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixin.stylus';
@import '~styles/base.stylus';

.seller-content {
  white-space: pre-wrap;

  .overview {
    position: relative;
    padding: 18px;

    .title {
      font-size: 14px;
      color: rgb(7, 17, 27);
      line-height: 14px;
      margin-bottom: 8px;
    }

    .star-wrapper {
      padding-bottom: 18px;
      border-1px(rgba(7, 17, 27, 0.1));

      .count {
        margin-left: 8px;
        font-size: 10px;
        color: rgb(77, 85, 93);
        line-height: 18px;

        &:last-chlid {
          margin-left: 12px;
        }
      }
    }

    .favorite {
      position: absolute;
      top: 20px;
      right: 18px;
      width: 36px;
      text-align: center;

      .icon-favorite {
        font-size: 24px;
        line-height: 24px;
        color: rgb(77, 85, 93);

        &.highlight {
          color: rgb(240, 20, 20);
        }
      }

      .text {
        display: inline-block;
        font-size: 10px;
        color: rgb(77, 85, 93);
        line-height: 10px;
      }
    }

    .overview-content {
      padding-top: 18px;
      font-size: 0px;

      .block {
        display: inline-block;
        width: 33%;
        text-align: center;

        &:nth-child(2) {
          width: 34%;
          box-sizing: border-box;
          border-left: 1px solid rgba(7, 17, 27, 0.1);
          border-right: 1px solid rgba(7, 17, 27, 0.1);
        }

        .title {
          font-size: 10px;
          line-height: 10px;
          color: rgb(147, 153, 159);
        }

        .text {
          .bigFont {
            font-size: 24px;
            line-height: 24px;
            font-weight: 200;
          }

          .smallFont {
            font-size: 10px;
            line-height: 10px;
            font-weight: 200;
          }
        }
      }
    }
  }

  .bulletin {
    padding: 18px 18px 0;

    .title {
      font-size: 14px;
      color: rgb(7, 17, 27);
      line-height: 14px;
      margin-bottom: 8px;
    }

    .content-wrapper {
      padding: 0 12px 12px;
      border-1px(rgba(7, 17, 27, 0.1));

      .content {
        font-size: 12px;
        line-height: 24px;
        font-weight: 200;
        color: rgb(240, 20, 20);
      }
    }

    .support-list {
      .support {
        padding: 18px 12px;
        border-1px(rgba(7, 17, 27, 0.1));

        &:last-child {
          border-none();
        }

        .desc {
          padding-left: 6px;
          font-size: 12px;
          font-weight: 200;
          line-height: 16px;
          color: rgb(7, 17, 27);
        }
      }
    }
  }

  .pics {
    padding: 18px;

    .title {
      font-size: 14px;
      color: rgb(7, 17, 27);
      line-height: 14px;
      margin-bottom: 12px;
    }

    .pic-wrapper {
      display: flex; // 让子元素根据内容被撑开
      white-space: nowrap;

      .pic-list {
        font-size: 0;

        .pic {
          display: inline-block;
          margin-right: 6px;
          width: 120px;
          height: 90px;

          &:last-child {
            margin: 0;
          }
        }
      }
    }
  }

  .infos {
    padding: 18px 18px 0;

    .title {
      font-size: 14px;
      color: rgb(7, 17, 27);
      line-height: 14px;
      padding-bottom: 12px;
      border-1px(rgba(7, 17, 27, 0.1));
    }

    .info-list {
      .info {
        padding: 18px 12px;
        font-size: 12px;
        font-weight: 200;
        color: rgb(7, 17, 27);
        line-height: 16px;
        border-1px(rgba(7, 17, 27, 0.1));

        &:last-child {
          border-none();
        }
      }
    }
  }
}
</style>
